<!--
 * @Description: file content
 * @Author: oooh
 * @Date: 2024-05-08 17:50:09
 * @LastEditors: oooh
 * @LastEditTime: 2024-08-06 15:27:44
 * @FilePath: \Civil_Servant_Performance_PC\src\views\performance-inventory\civil\daily-performance.vue
-->
<template>
  <div class="component-container">
    <div class="flex-table">
      <div class="table-container" v-loading="tableLoading">
        <div class="table-title">平时考核登记表</div>
        <p class="table-subTitle">({{ this.queryParams.year || '-' }}年第{{ this.queryParams.quarter || '-' }}次)</p>
        <table v-if="tableForm.id">
          <tr>
            <td>姓名</td>
            <td>
              {{ tableForm.civilServantName }}
            </td>
            <td>职务</td>
            <td>
              {{ tableForm.positionDictName }}
            </td>
          </tr>
          <tr>
            <td>岗位类别<br />编制性质</td>
            <td>{{ tableForm.workNatureDictName }}</td>
            <td>出勤情况</td>
            <td>
              <div class="flex">在办{{ tableForm.workDay }}天，外出{{ tableForm.outDay }} 天</div>
              <div class="flex">公休 {{ tableForm.restDay }}天，请假 {{ tableForm.leaveDay }} 天</div>
            </td>
          </tr>
          <tr>
            <td>阶段性目标任务</td>
            <td colspan="3">
              <p class="align-left pre-wrap">{{ tableForm.targetTask || '-' }}</p>
            </td>
          </tr>
          <tr>
            <td>工作完成情况<br />（含临时交办任务）</td>
            <td colspan="3">
              <p class="text-left">(一)重点工作</p>
              <p class="pl-10 text-left pre-wrap">{{ tableForm.importantWorkCompletionSituation || '-' }}</p>
              <p class="text-left">(二)中心工作</p>
              <p class="pl-10 text-left pre-wrap">{{ tableForm.centerWorkCompletionSituation || '-' }}</p>
              <p class="text-left">(三)其他工作</p>
              <p class="pl-10 text-left pre-wrap">{{ tableForm.otherWorkCompletionSituation || '-' }}</p>
            </td>
          </tr>
          <tr>
            <td>政治素质<br />考察评价</td>
            <td colspan="3">
              <p class="pl-10 text-left pre-wrap">{{ tableForm.politicalQualityEvaluate || '-' }}</p>
            </td>
          </tr>
          <tr>
            <td>站办所负责人<br />审核备注</td>
            <td colspan="3">
              <p class="pl-10 text-left pre-wrap">{{ tableForm.deptManagerAuditRemarks || '-' }}</p>
            </td>
          </tr>
          <tr>
            <td>绩效管理得分</td>
            <td colspan="3">
              <ul v-if="checkRole(['cadre'])">
                <li>绩效管理等次：{{ tableForm.personalQuarterScoreCollect.gradeDictName || '-' }}</li>
              </ul>
              <ul v-else>
                <li v-for="item in tableForm.personalQuarterScoreCollect.detailsJson" :key="item.label">
                  {{ item.label }}：{{ item.score || '-' }} 分
                </li>
                <li>考评等次：{{ tableForm.personalQuarterScoreCollect.gradeDictName || '-' }}</li>
                <li>总得分：{{ tableForm.personalQuarterScoreCollect.score || '-' }}</li>
              </ul>
            </td>
          </tr>
          <tr>
            <td>主管领导评价<br />及<br />等次建议</td>
            <td colspan="3">
              <p class="text-left pre-wrap">{{ tableForm.partLeaderAuditRemarks }}</p>

              <p class="text-right">
                <span>{{ tableForm.partLeaderAuditDate }}</span>
              </p>
            </td>
          </tr>
          <tr>
            <td>单位主要领导<br />或领导班子<br />或组织人事<br />部门审定意见</td>
            <td colspan="3">
              <p class="text-left">{{ tableForm.mainLeaderAuditRemarks }}</p>
              <p class="text-right">
                <span>{{ tableForm.mainLeaderAuditDate }}</span>
              </p>
            </td>
          </tr>
          <tr>
            <td>备注</td>
            <td colspan="3">
              <p class="text-left">{{ tableForm.remarks }}</p>
            </td>
          </tr>
        </table>
        <p v-if="!tableForm.id && !tableLoading" style="font-size: 30px" class="color-info">暂无申报数据</p>
      </div>
    </div>
  </div>
</template>

<script>
import { listTable } from '@/api/work/daily-performance'
import { checkRole } from '@/utils/permission' // 权限判断函数

export default {
  name: 'performance-inventory_civil_daily-performance',
  dicts: [],
  props: {
    queryForm: {
      type: Object,
      default: () => {}
    }
  },
  components: {},
  data() {
    return {
      tableLoading: false,
      tableList: [],
      tableForm: {},
      queryParams: {}
    }
  },
  computed: {},
  watch: {
    queryForm: {
      deep: true,
      immediate: true,
      handler(query) {
        // if (!query.civilServantId) return
        this.queryParams = { ...this.queryParams, ...query }
        this.getList()
      }
    }
  },
  methods: {
    checkRole,
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
    },
    getList() {
      this.tableLoading = true
      listTable(this.queryParams)
        .then(res => {
          this.tableForm = res.data || {}
          this.tableLoading = false
        })
        .catch(() => {
          this.tableLoading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.table-container {
  margin: 0 auto;
  text-align: center;
  border-radius: 5px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
  padding: 30px 25px;
  box-sizing: border-box;
  min-width: 1000px;
  max-width: 1800px;
  .table-title {
    font-size: 28px;
    font-weight: bold;
  }
  table {
    width: 100%;
    margin: 0 auto;
    border: 1px solid #333;
    border-collapse: collapse;

    tr {
      td {
        border: 1px solid #333;
        width: 25%;
        padding: 20px;
        box-sizing: border-box;
        ul {
          margin: 0;
          padding: 0;
          list-style-type: none;
          text-align: left;
        }
      }
    }
  }
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
::v-deep .number-input {
  width: auto !important;
}
::v-deep .number-input .el-input__inner {
  padding: 0 5px;
  border: none;
  border-bottom: 1px solid;
  border-radius: 0;
  text-align: center;
  width: 50px;
  height: auto;
  line-height: normal;
}
::v-deep .date-input .el-input__inner {
  border: none;
}

::v-deep .el-date-editor.el-input {
  width: 150px;
}
.flex-table {
  overflow: auto !important;
  padding: 15px;
  box-sizing: border-box;
}
</style>
